<!-- 分页 -->
<template>
  <div class="container">
    <Nav></Nav>
    <div class="notice_content">
      <div class="notice_list">
        <!-- 岸上早知道 -->
        <div class="shore_tab">
          <div class="shore_list">
            <li :class="type === 1 ? 'active' : ''" @click="gettitle(1)">每日备考</li>
            <li :class="type === 2 ? 'active' : ''" @click="gettitle(2)">每日一练</li>
            <li :class="type === 3 ? 'active' : ''" @click="gettitle(3)">每日一讲</li>
            <li :class="type === 4 ? 'active' : ''" @click="gettitle(4)">小视频</li>
          </div>
        </div>
        <!-- 岸上早知道 -->
        <!-- 文章列表 -->
        <div class="article_content">
          <div class="article_list1">
            <a :href="item.link" v-for="(item, index) in results" :key="index">
              <p></p>
              <p>{{item.title ? item.title : item.article_name}}</p>
              <p>{{item.publish_time ? item.publish_time : item.create_time}}</p>
            </a>
          </div>
          <!-- 分页 -->
          <div class="article_page" v-if="pageNum > 1">
            <div class="page_num">
              <template v-for="(item, index) of (pageNum)">
                <li @click="pageSort(index)" :key="index" v-if="index >= pageAdd && index <= pageSum">
                  <p :class="pagestatus == index ? 'active' : ''">{{item}}</p>
                  <p :class="pagestatus == index ? 'show' : 'hidden'"></p>
                </li>
              </template>
              <li v-if="pageShow && pageNum > 10">...</li>
              <li v-if="pageShow && pageNum > 10">
                <p>{{pageNum}}</p>
                <p :class="pagestatus == index ? 'show' : 'hidden'"></p>
              </li>
            </div>
            <div class="page_button">
              <li @click="Sleft()"><img src="../assets/img/left.png" alt=""></li>
              <li @click="Sright()"><img src="../assets/img/right.png" alt=""></li>
            </div>
          </div>
          <!-- 分页 -->
        </div>
      </div>
      <!--  -->
      <div class="notice_show">
        <div class="office_show">
          <div class="show_title">岸上资讯</div>
          <div class="show_title_list">
            <a :href="item.link" v-for="(item, index) of stickInfo" :key="index">
              <p>{{item.article_name}}</p>
              <p>{{item.create_time}}</p>
            </a>
          </div>
        </div>
        <div
          class="show_img"
          v-for="(item, index) of eliveList"
          :key="index"
          v-show="item.is_now_live === 1">
          <li><img :src="item.img" alt=""></li>
          <li>{{item.name}}</li>
          <li>
            <p>{{item.teacher_name}}</p>
            <p>{{item.live_times}}</p>
            <p v-if="!item.url">即将开始</p>
            <p v-else><a :href="item.url" target="_blank" rel="noopener noreferrer">点击播放</a></p>
          </li>
        </div>
        <div class="get_notes">
          <li>关注公众号免费学课程</li>
          <li><img src="../assets/img/serve.jpg" alt=""></li>
        </div>
      </div>
      <!--  -->
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
import Nav from '../components/Nav/nav'
import Bottom from '../components/Bottom/bottom'
export default {
  async asyncData ({app, params}) {
    let [data] = await Promise.all([
      app.$http.post('/link/getArticleLists', {
        is_top: 1,
        type: '1, 2, 3, 4',
        page: 1,
        page_count: 50
      })
    ])
    return {
      stickInfo: data.data.data
    }
  },
  head () {
    return {
      title: '山西公务员考试每日备考-每日一练-每日一讲-小视频-岸上教育官网',
      meta:[{
        hid: 'description',
        name: 'description',
        content: '岸上教育为备考的学员们提供每日备考，每日一练，每日一讲，小视频等，为大家在公务员考试的道路上保驾护航！'
      },{
        hid: 'Keywords',
        name: 'Keywords',
        content: '山西公务员考试每日备考，山西公务员考试每日一练，山西公务员考试每日一讲，山西公务员考试小视频'
      }]
    }
  },
  data () {
    return {
      // 导航分类
      navType: '',
      // 查询结果
      results: [],
      // 一级分类
      title: 0,
      type: 1,
      // 分页数量
      pageNum: 0,
      pageAdd: 0,
      pageSum: 10,
      page: 1,
      page_count: 15,
      pageShow: true,
      // 分页显示状态
      pagestatus: 0,
      // 置顶信息
      stickInfo: [],
      // 课程列表
      classList: [],
      // 视频列表
      videoLists: [],
      // 一直播
      eliveList: [],
      // 右侧列表参数
      catId: 0
    }
  },

  created () {
  },

  mounted () {
    this.navType = this.$route.name
    localStorage.setItem('type', this.navType)
    this.type = this.$route.params.shoreId
    if (this.type === undefined) {
      this.type = 1
    }
    this.gettitle(this.type)

    this.navType = this.$route.name
    this.catId = this.$route.query.cat_one_id
    this.elive()
    this.KnownStick()
    this.getClass()
  },

  components: {
    Nav,
    Bottom
  },

  computed: {},
  // watch: {
  //   '$route' (to, from) { // 监听路由是否变化
  //     if (to.query.id !== from.query.id) {
  //       this.id = to.query.id
  //       this.sIndex = to.query.id
  //       this.cid = to.query.cid
  //       this.SerchCity(this.id, this.cid) // 重新加载数据
  //     }
  //   }
  // },

  methods: {
    // 外链--e直播
    elive () {
      this.$http.post('/elive/getLiveLists', {
        page: 1,
        page_count: 3
      }).then((res) => {
        this.eliveList = res.data.data
        this.eliveList.map((r, index) => {
          this.eliveList[index].live_times = r.live_time.split(' ')[0]
        })
      })
    },
    // 置顶岸上早知道
    KnownStick () {
      this.$http.post('/link/getArticleLists', {
        is_top: 1,
        type: '1, 2, 3, 4',
        page: 1,
        page_count: 10
      }).then((res) => {
        this.stickInfo = []
        this.stickInfo = res.data.data
        this.stickInfo.map((res, index) => {
          var time = this.getDay(res.create_time)
          this.stickInfo[index].create_time = time
        })
      })
    },
    // 课程列表
    getClass () {
      this.$http.post('/course/getCourseLists', {
        is_exam: 1,
        page: 1,
        page_count: 10
      }).then((res) => {
        this.classList = res.data.data
        this.classList.map((res, index) => {
          var startTime = this.getDay(res.start_time)
          var endTime = this.getDay(res.end_time)
          this.classList[index].start_time = startTime
          this.classList[index].end_time = endTime
        })
        // 遍历相同的exam_id 然后去重显示
        let hash = {}
        const newArr = this.classList.reduceRight((item, next) => {
          hash[next.exam_id] ? '' : hash[next.exam_id] = true && item.push(next)
          return item
        }, [])
        this.classList = newArr
      })
    },
    // ------------------------------------------------------------------------
    // 分页左侧
    Sleft () {
      if (this.page !== 1) {
        this.page -= 1
        this.pagestatus = this.page - 1
        if (this.pagestatus < this.pageAdd) {
          this.pageAdd -= 10
          this.pageSum -= 10
        } else if (this.pagestatus < 10) {
          this.pageAdd = 0
          this.pageSum = 10
        } else if (this.pagestatus <= (this.pageNum - 10)) {
          this.pageShow = true
        }
        this.getArticleLists(this.type)
      }
    },
    // 分页右侧
    Sright () {
      if (this.page !== this.pageNum) {
        this.page += 1
        this.pagestatus = this.page - 1
        if (this.pagestatus > this.pageSum) {
          this.pageAdd += 10
          this.pageSum += 10
        } else if (this.pagestatus >= (this.pageNum - 10)) {
          this.pageShow = false
        }
        this.getArticleLists(this.type)
      }
    },
    // 分页点击
    pageSort (index) {
      this.page = index + 1
      this.pagestatus = index
      this.getArticleLists(this.type)
    },
    // 获取选中的类型
    gettitle (index) {
      this.type = index
      this.page = 1
      this.pagestatus = 0
      this.getArticleLists(this.type)
    },
    // 获取时间戳转年月日
    getDay (data) {
      var date = new Date(data * 1000)
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10) ? '0' + (date.getDate()) : + date.getDate()
      return M + D
    },
    // 岸上早知道接口
    getArticleLists (types) {
      // if (this.shoreIds) {
      //   this.type = this.shoreIds
      // } else {
      //   if (!types) {
      //     this.type = 1
      //   } else {
      //     this.type = types
      //     // this.pagestatus = 0
      //   }
      // }
      this.$http.post('/link/getArticleLists', {
        news_type: 1,
        type: types,
        news_id: 1,
        page: this.page,
        page_count: this.page_count
      }).then((res) => {
        this.results = []
        this.results = res.data.data
        this.pageNum = 0
        this.pageNum = res.data.all_num
        if (this.pageNum > 0) {
          this.pageNum = Math.ceil(Number(this.pageNum) / Number(this.page_count))
        }
        this.results.map((res, index) => {
          var time = this.getDay(res.create_time)
          this.results[index].create_time = time
        })
      })
      this.shoreIds = 0
    }
  }
}

</script>
<style lang='scss' scoped>
.notice_show{
  width: 286px;
  height: auto;
}
.office_show{
  width: 286px;
  height: 323px;
  background: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0px 12px;
}
.office_show .show_title{
  width: 100%;
  text-align: center;
  margin-top: 16px;
  margin-bottom: 12px;
}
.office_show .show_title_list{
  overflow: hidden;
  height: 255px;
}
.show_title_list a{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 8px;
  height:44px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:22px;
  cursor: pointer;
  text-decoration: none;
}
.show_title_list a p:first-child{
  width: 204px;
  height: 44px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.show_title_list a:hover{
  color: rgba(24, 144, 255, 1);
}
.show_img{
  width: 286px;
  padding-bottom: 10px;
  margin-top: 30px;
  background: #ffffff;
}
.show_img li{
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:21px;
  cursor: pointer;
}
.show_img li:hover{
  color: rgba(24, 144, 255, 1);
}
.show_img li img{
  width: 286px;
  height: 286px;
}
.show_img li:nth-child(2){
  margin-top: 12px;
  box-sizing: border-box;
  padding-left: 12px;
}
.show_img li:last-child{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 8px;
  box-sizing: border-box;
  padding-left: 12px;
}
.show_img li:last-child p:nth-child(2){
  margin-left: 24px;
}
.show_img li:last-child p:nth-child(3){
  margin-left: 54px;
  font-size: 12px;
  background: rgba(24, 144, 255, 1);
  color: #ffffff;
  border-radius: 10px;
  padding: 0px 10px;
}
.show_img li:last-child p:nth-child(3) a{
  color: #ffffff;
  text-decoration: none;
}
.get_notes{
  width: 286px;
  height: 247px;
  background: #ffffff;
  margin-top: 30px;
  box-sizing: border-box;
  padding: 16px;
}
.get_notes li:first-child{
  width: 100%;
  text-align: center;
}
.get_notes li:last-child{
  width: 100%;
  text-align: center;
  margin-top:30px;
}
.get_notes li img{
  width: 118px;
  height: 118px;
}
.course_infor{
  width: 286px;
  height: auto;
  cursor: pointer;
}
.course_list{
  width: 286px;
  height: auto;
  background:rgba(255,255,255,1);
  margin-top: 20px;
  padding-bottom: 10px;
}
.course_list:first-child{
  margin-top: 0px;
}
.course_list1{
  width: 286px;
  height: auto;
  background:rgba(255,255,255,1);
  margin-top: 20px;
}
.course_list1:first-child{
  margin-top: 0px;
}
.course_list1 .course_img{
  height: 286px;
}
.course_list1 .course_img img{
  height: 286px;
}
.course_of{
  box-sizing: border-box;
  padding: 0px 12px;
}
.course_of li:first-child{
  // height:22px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:22px;
  margin-top: 12px;
}
.course_of li:last-child{
  line-height: 25px;
}
// 12312
.course_of1{
  box-sizing: border-box;
  padding: 0px 12px;
}
.course_of1 li:first-child{
  // height: 22px;
  font-size:16px;
  color:rgba(34,34,34,1);
  line-height:22px;
  margin-top: 12px;
  flex-wrap: wrap;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // display: -webkit-box;
  // -webkit-line-clamp: 1;
  // line-clamp: 1;
  // -webkit-box-orient: vertical;
}
.course_of1 li:last-child{
  line-height: 25px;
  padding-bottom: 10px;
}
// 123
.course_tea{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 12px;
  box-sizing: border-box;
  padding: 0px 12px;
}
.course_tea li{
  margin-left: 20px;
}
.course_tea li:first-child{
  margin-left: 0px;
}
.course_tea li p:last-child{
  margin-top: 4px;
  text-align: center;
}
.course_tea li p img{
  width:50px;
  height:50px;
  border-radius: 50%;
}
.course_img{
  width: 100%;
  height: 160px;
  overflow: hidden;
}
.course_img img{
  width: 286px;
  height: 160px;
}
// ------------------------------------------------------------
.container{
  min-width: 1200px;
  background: rgb(234, 238, 239);
}
.notice_content{
  display: flex;
  flex-direction: row;
  align-items:flex-start;
  justify-content: space-between;
  width: 1200px;
  margin: 40px auto 80px;
}
.notice_list{
  width: 895px;
  height: auto;
  background: #ffffff;
  overflow: hidden;
}
// 招考公告
.article_title{
  margin-top: 40px;
  margin-left: 30px;
  margin-bottom: 30px;
}
.article_t1{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 23px;
}
.article_tlist{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.article_tlist li{
  margin-left: 5px;
  height:24px;
  font-size:15px;
  color:rgba(34,34,34,1);
  line-height:24px;
  cursor: pointer;
  border-radius:12px;
  text-align: center;
  padding: 0px 5px;
}
.article_title li:first-child{
  margin-left: 0px;
}
.article_tlist li.active{
  // width:48px;
  height:24px;
  background:rgba(24,144,255,1);
  border-radius:12px;
  text-align: center;
  line-height: 24px;
  font-size:15px;
  color:rgba(247,249,251,1);
  padding: 0px 8px;
}
// 招考公告
// 文章列表
.article_content{
  border-top: 1px solid rgba(240,240,240,1);
}
.article_list1{
  box-sizing: border-box;
  padding: 30px;
}
// ---------
.article_list1 a{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 12px;
  cursor: pointer;
  color:rgba(34,34,34,1);
}
.article_list1 a:hover{
  color: rgba(24, 144, 255, 1);
  text-decoration:none;
  cursor:pointer;
}
.article_list1 a:nth-child(5n + 1){
  border-top: 2px dashed rgba(204, 204, 204, 1);
  margin-top: 20px;
  padding-top: 20px;
}
.article_list1 a:first-child{
  margin-top: 0px;
  border-top: none;
  padding-top: 0px;
}
.article_list1 a p:first-child{
  width:7px;
  height:7px;
  border:2px solid rgba(34,34,34,1);
  border-radius: 50%;
}
// .article_list1 li p:nth-child(2){
//   margin-left: 20px;
// }
.article_list1 a p:nth-child(2){
  margin-left: 20px;
  width: 740px;
}
.article_list1 a p{
  height:21px;
  font-size:16px;
  line-height:21px;
  cursor:pointer;
}
// ----------
.article_list1 li{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 12px;
  cursor: pointer;
  color:rgba(34,34,34,1);
}
.article_list1 li:hover{
  color: rgba(24, 144, 255, 1);
}
.article_list1 li:nth-child(5n + 1){
  border-top: 2px dashed rgba(204, 204, 204, 1);
  margin-top: 20px;
  padding-top: 20px;
}
.article_list1 li:first-child{
  margin-top: 0px;
  border-top: none;
  padding-top: 0px;
}
.article_list1 li p:first-child{
  width:7px;
  height:7px;
  border:2px solid rgba(34,34,34,1);
  border-radius: 50%;
}
// .article_list1 li p:nth-child(2){
//   margin-left: 20px;
// }
.article_list1 li p:nth-child(2){
  margin-left: 20px;
  width: 740px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.article_list1 li p{
  height:21px;
  font-size:16px;
  line-height:21px;
}
.article_list1 li p.down{
  width:60px;
  height:25px;
  background:rgba(24,144,255,1);
  border-radius:12px;
  color: #ffffff;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
}
.article_list1 li p.down a{
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  width: 60px;
  height: 25px;
  color: #ffffff;
  padding-left: 14px;
}
// 文章列表
// 分页
.article_page{
  box-sizing: border-box;
  padding: 60px 30px 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.page_num{
  width: 650px;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
}
.page_num li{
  cursor: pointer;
  margin-left: 20px;
  width: 30px;
  height: 50px;
  line-height: 25px;
  text-align: center;
  font-size:18px;
  font-weight:bold;
}
.page_num li p.active{
  color: rgba(24, 144, 255, 1);
}
.page_num li:hover p:first-child{
  color: rgba(24, 144, 255, 1);
  // color: red;
}
.page_num li:first-child{
  margin-left:0px;
}
.page_num li p:last-child{
  width:7px;
  height:7px;
  border:2px solid rgba(24,144,255,1);
  border-radius: 50%;
  margin:  0 auto;
}
.page_num li p.show{
  display: block;
}
.page_num li p.hidden{
  display: none;
}
.page_button{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.page_button li{
  margin-left: 30px;
  cursor: pointer;
}
.page_button li:first-child{
  margin-left: 0px;
}
.page_button li img{
  width: 50px;
  height: 50px;
}
// 分页
// 岸上早知道
.shore_tab{
  width: 100%;
}
.shore_list{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.shore_list li{
  height: 55px;
  line-height: 55px;
  margin-left: 30px;
  cursor: pointer;
  box-sizing: border-box;
}
.shore_list li:hover{
  color: rgba(24,144,255,1);
  border-bottom: 3px solid rgba(24,144,255,1);
}
.shore_list li.active{
  color: rgba(24,144,255,1);
  border-bottom: 3px solid rgba(24,144,255,1);
}
// 岸上早知道
</style>
